<div id="settings_page" class="new-style overlay-content modal-bg">
    <div class="settings-header mobile">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
        <h1>{{ _('Settings') }}<span class="section"></span></h1>
        <div class="exit">
            <span class="exit-sign">&times;</span>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="sidebar left" data-simplebar>
        <div class="sidebar-list dark-grey small-text">
            <div class="center tab-container"></div>
            <ul class="normal-settings-list">
                <li tabindex="0" data-section="your-account">
                    <i class="icon fa fa-user" aria-hidden="true"></i>
                    <div class="text">{{ _('Your account') }}</div>
                </li>
                <li tabindex="0" data-section="display-settings">
                    <i class="icon fa fa-clock-o" aria-hidden="true"></i>
                    <div class="text">{{ _('Display settings') }}</div>
                </li>
                <li tabindex="0" data-section="notifications">
                    <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
                    <div class="text">{{ _('Notifications') }}</div>
                </li>
                {% if not is_guest %}
                <li tabindex="0" data-section="your-bots">
                    <i class="icon fa fa-github" aria-hidden="true"></i>
                    <div class="text">{{ _('Your bots') }}</div>
                </li>
                {% endif %}
                <li tabindex="0" data-section="alert-words">
                    <i class="icon fa fa-book" aria-hidden="true"></i>
                    <div class="text">{{ _('Alert words') }}</div>
                </li>
                {% if max_file_upload_size_mib > 0 %}
                <li tabindex="0" data-section="uploaded-files">
                    <i class="icon fa fa-paperclip" aria-hidden="true"></i>
                    <div class="text">{{ _('Uploaded files') }}</div>
                </li>
                {% endif %}
                <li tabindex="0" data-section="muted-topics">
                    <i class="icon fa fa-bell-slash" aria-hidden="true"></i>
                    <div class="text">{{ _('Muted topics') }}</div>
                </li>
            </ul>

            <ul class="org-settings-list">
                <li tabindex="0" data-section="organization-profile">
                    <i class="icon fa fa-address-card" aria-hidden="true"></i>
                    <div class="text">{{ _('Organization profile') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="organization-settings">
                    <i class="icon fa fa-flask" aria-hidden="true"></i>
                    <div class="text">{{ _('Organization settings') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="organization-permissions">
                    <i class="icon fa fa-lock" aria-hidden="true"></i>
                    <div class="text">{{ _('Organization permissions') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                <li tabindex="0" data-section="emoji-settings">
                    <i class="icon fa fa-smile-o" aria-hidden="true"></i>
                    <div class="text">{{ _('Custom emoji') }}</div>
                    {% if is_guest %}
                        <i class="locked fa fa-lock" title="{{ _('Guest users cannot edit custom emoji.') }}"></i>
                    {% else %}
                        {% if not is_admin and user_profile and user_profile.realm.add_emoji_by_admins_only %}
                        <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                        {% endif %}
                    {% endif %}
                </li>
                {% if not is_guest %}
                <li tabindex="0" data-section="user-groups-admin">
                    <i class="icon fa fa-group" aria-hidden="true"></i>
                    <div class="text">{{ _('User groups') }}</div>
                </li>
                {% endif %}
                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="auth-methods">
                    <i class="icon fa fa-key" aria-hidden="true"></i>
                    <div class="text">{{ _('Authentication methods') }}</div>
                    {% if not is_owner %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization owners can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                {% if not is_guest %}
                <li tabindex="0" data-section="user-list-admin">
                    <i class="icon fa fa-user" aria-hidden="true"></i>
                    <div class="text">{{ _('Users') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                {% endif %}
                {% if not is_guest %}
                <li tabindex="0" data-section="deactivated-users-admin">
                    <i class="icon fa fa-trash-o" aria-hidden="true"></i>
                    <div class="text">{{ _('Deactivated users') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                {% endif %}
                {% if not is_guest %}
                <li tabindex="0" data-section="bot-list-admin">
                    <i class="icon fa fa-github" aria-hidden="true"></i>
                    <div class="text">{{ _('Bots') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                {% endif %}
                {% if not is_guest %}
                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="default-streams-list">
                    <i class="icon fa fa-exchange" aria-hidden="true"></i>
                    <div class="text">{{ _('Default streams') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                {% endif %}
                <li tabindex="0" data-section="linkifier-settings">
                    <i class="icon fa fa-font" aria-hidden="true"></i>
                    <div class="text">{{ _('Linkifiers') }}</div>
                    {% if not is_admin %}
                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                    {% endif %}
                </li>
                {% if is_admin %}
                <li tabindex="0" data-section="profile-field-settings">
                    <i class="icon fa fa-user" aria-hidden="true"></i>
                    <div class="text">{{ _('Custom profile fields') }}</div>
                </li>
                {% endif %}
                {% if not guest %}
                <li tabindex="0" data-section="invites-list-admin">
                    <i class="icon fa fa-user-plus" aria-hidden="true"></i>
                    <div class="text">{{ _('Invitations') }}</div>
                </li>
                {% endif %}
                {% if is_admin %}
                <li tabindex="0" data-section="data-exports-admin">
                    <i class="icon fa fa-database" aria-hidden="true"></i>
                    <div class="text">{{ _('Data exports') }}</div>
                </li>
                {% endif %}
                {% if not is_admin %}
                <div class="collapse-settings-btn">
                    <i id='toggle_collapse_chevron' class='fa fa-angle-double-down'></i>
                    <p id='toggle_collapse'>{{ _('Show more') }}</p>
                </div>
                {% endif %}
            </ul>
        </div>
    </div>
    <div class="content-wrapper right">
        <div class="settings-header">
            <h1>{{ _('Settings') }}<span class="section"></span></h1>
            <div class="exit">
                <span class="exit-sign">&times;</span>
            </div>
        </div>
        <div id="settings_content" data-simplebar data-simplebar-auto-hide="false">
            <div class="organization-box organization">

            </div>
            <div class="settings-box">
            </div>
        </div>
        <div id="edit_bot_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
          aria-labelledby="edit_bot_modal_label" aria-hidden="true">
        </div>
    </div>
</div>
